@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
@layer components {
    .radio-small-card {
        @apply flex items-center justify-center rounded-md sm:flex-1 cursor-pointer focus:outline-none;
        @apply ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50 peer-focus-visible:ring-2 peer-focus-visible:ring-orange-600;
        @apply peer-focus-visible:ring-offset-2 peer-checked:bg-orange-600 peer-checked:text-white peer-checked:hover:bg-orange-700;
    }
}

@layer utilities {
  .mask-sweep {
    @apply inline-block animate-sweep;
    -webkit-mask: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%) 0 0 / 200% 100%;
    mask: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%) 0 0 / 200% 100%;
  }

  @keyframes sweep {
    to {
      -webkit-mask-position: -200% 0;
      mask-position: -200% 0;
    }
  }

  .animate-sweep {
    animation: sweep 1.6s linear infinite;
  }
}